<template>
  <el-card body-style="min-height: 86vh">
    <div>
      <el-form :inline="true">
        <el-form-item label="日期">
          <el-date-picker
            v-model="curDate"
            type="month"
            placeholder="选择日期"
            format="YYYY-MM"
            value-format="YYYY-MM"
          />
        </el-form-item>
        <el-form-item>
          <el-button>重置</el-button>
          <el-button type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <table cellspacing="0" cellpadding="0" border="0">
      <thead style="background-color: var(--el-color-primary)">
        <tr style="height: 50px; color: #fff">
          <th style="width: 140px" class="relative">
            <p>{{ curYear }}年</p>
            <span>{{ curMonth }}月</span>
            <span class="pre-btn" @click="handlePre">〈</span>
          </th>
          <th
            style="width: 100px"
            v-for="(item, index) in newList[0].status"
            :key="index"
            :style="item.num == Time ? 'background: #e46240;' : ''"
          >
            {{ item.num }}日
          </th>
          <th class="cursor-pointer" @click="handleNext">〉</th>
        </tr>
      </thead>
      <tbody style="background: #f6f6f6">
        <tr v-for="(item, index) in newList" :key="index">
          <td>{{ item.name }}</td>
          <el-popover
            v-for="(o, t) in item.status"
            :key="t"
            placement="bottom"
            :width="100"
            trigger="click"
            ref="setShowData"
          >
            <span>
              <div
                v-for="(item, index) in status"
                :key="index"
                class="box-list"
                @click="handleSelect(item)"
              >
                {{ item }}
              </div>
            </span>
            <template #reference>
              <td style="color: #666" @click="handleChange(item.name, o.num)">{{ o.state }}</td>
            </template>
          </el-popover>
        </tr>
      </tbody>
    </table>
  </el-card>
</template>
<script setup lang="ts">
import { ref, computed } from "vue";
import dayjs from "dayjs";
//当前页码
let page = ref(1);
//当前日期
const curDate = ref(dayjs().format("YYYY-MM"));
const curYear = ref(dayjs().format("YYYY"));
const curMonth = ref(dayjs().format("MM"));
let Time = ref(1);
// 类型
let status = ref(["上班", "休一天", "休半天", "请一天", "请半天", "迟到", "早退"]);

let data = ref([
  {
    name: "宋小宝",
    status: [
      { num: 1, state: "班" },
      { num: 2, state: "班" },
      { num: 3, state: "班" },
      { num: 4, state: "班" },
      { num: 5, state: "班" },
      { num: 6, state: "班" },
      { num: 7, state: "班" },
      { num: 8, state: "班" },
      { num: 9, state: "班" },
      { num: 10, state: "班" },
      { num: 11, state: "班" },
      { num: 12, state: "班" },
      { num: 13, state: "班" },
      { num: 14, state: "班" },
      { num: 15, state: "班" },
      { num: 16, state: "班" },
      { num: 17, state: "班" },
      { num: 18, state: "班" },
      { num: 19, state: "班" },
      { num: 20, state: "班" },
      { num: 21, state: "班" },
      { num: 22, state: "班" },
      { num: 23, state: "班" },
      { num: 24, state: "班" },
      { num: 25, state: "班" },
      { num: 26, state: "班" },
      { num: 27, state: "休一天" },
      { num: 28, state: "班" },
      { num: 29, state: "班" },
      { num: 30, state: "班" },
      { num: 31, state: "班" }
    ]
  },
  {
    name: "戴绍",
    status: [
      { num: 1, state: "班" },
      { num: 2, state: "班" },
      { num: 3, state: "班" },
      { num: 4, state: "班" },
      { num: 5, state: "班" },
      { num: 6, state: "班" },
      { num: 7, state: "班" },
      { num: 8, state: "休一天" },
      { num: 9, state: "班" },
      { num: 10, state: "班" },
      { num: 11, state: "班" },
      { num: 12, state: "班" },
      { num: 13, state: "班" },
      { num: 14, state: "班" },
      { num: 15, state: "班" },
      { num: 16, state: "班" },
      { num: 17, state: "班" },
      { num: 18, state: "班" },
      { num: 19, state: "班" },
      { num: 20, state: "班" },
      { num: 21, state: "班" },
      { num: 22, state: "休一天" },
      { num: 23, state: "班" },
      { num: 24, state: "班" },
      { num: 25, state: "班" },
      { num: 26, state: "班" },
      { num: 27, state: "班" },
      { num: 28, state: "班" },
      { num: 29, state: "班" },
      { num: 30, state: "班" },
      { num: 31, state: "班" }
    ]
  },

  {
    name: "何根",
    status: [
      { num: 1, state: "班" },
      { num: 2, state: "班" },
      { num: 3, state: "班" },
      { num: 4, state: "班" },
      { num: 5, state: "班" },
      { num: 6, state: "班" },
      { num: 7, state: "班" },
      { num: 8, state: "班" },
      { num: 9, state: "班" },
      { num: 10, state: "班" },
      { num: 11, state: "班" },
      { num: 12, state: "班" },
      { num: 13, state: "班" },
      { num: 14, state: "班" },
      { num: 15, state: "班" },
      { num: 16, state: "班" },
      { num: 17, state: "班" },
      { num: 18, state: "班" },
      { num: 19, state: "班" },
      { num: 20, state: "班" },
      { num: 21, state: "班" },
      { num: 22, state: "班" },
      { num: 23, state: "班" },
      { num: 24, state: "班" },
      { num: 25, state: "班" },
      { num: 26, state: "班" },
      { num: 27, state: "班" },
      { num: 28, state: "班" },
      { num: 29, state: "班" },
      { num: 30, state: "班" },
      { num: 31, state: "班" }
    ]
  },
  {
    name: "李明",
    status: [
      { num: 1, state: "班" },
      { num: 2, state: "班" },
      { num: 3, state: "班" },
      { num: 4, state: "班" },
      { num: 5, state: "班" },
      { num: 6, state: "班" },
      { num: 7, state: "班" },
      { num: 8, state: "班" },
      { num: 9, state: "班" },
      { num: 10, state: "班" },
      { num: 11, state: "班" },
      { num: 12, state: "班" },
      { num: 13, state: "班" },
      { num: 14, state: "班" },
      { num: 15, state: "班" },
      { num: 16, state: "班" },
      { num: 17, state: "班" },
      { num: 18, state: "班" },
      { num: 19, state: "班" },
      { num: 20, state: "班" },
      { num: 21, state: "班" },
      { num: 22, state: "班" },
      { num: 23, state: "班" },
      { num: 24, state: "班" },
      { num: 25, state: "班" },
      { num: 26, state: "班" },
      { num: 27, state: "班" },
      { num: 28, state: "班" },
      { num: 29, state: "班" },
      { num: 30, state: "班" },
      { num: 31, state: "班" }
    ]
  },
  {
    name: "王二瑾",
    status: [
      { num: 1, state: "班" },
      { num: 2, state: "班" },
      { num: 3, state: "班" },
      { num: 4, state: "班" },
      { num: 5, state: "班" },
      { num: 6, state: "班" },
      { num: 7, state: "班" },
      { num: 8, state: "班" },
      { num: 9, state: "班" },
      { num: 10, state: "班" },
      { num: 11, state: "班" },
      { num: 12, state: "班" },
      { num: 13, state: "班" },
      { num: 14, state: "班" },
      { num: 15, state: "班" },
      { num: 16, state: "班" },
      { num: 17, state: "班" },
      { num: 18, state: "班" },
      { num: 19, state: "班" },
      { num: 20, state: "班" },
      { num: 21, state: "班" },
      { num: 22, state: "班" },
      { num: 23, state: "班" },
      { num: 24, state: "班" },
      { num: 25, state: "班" },
      { num: 26, state: "班" },
      { num: 27, state: "班" },
      { num: 28, state: "班" },
      { num: 29, state: "班" },
      { num: 30, state: "班" },
      { num: 31, state: "班" }
    ]
  },
  {
    name: "刘建军",
    status: [
      { num: 1, state: "班" },
      { num: 2, state: "班" },
      { num: 3, state: "班" },
      { num: 4, state: "班" },
      { num: 5, state: "班" },
      { num: 6, state: "班" },
      { num: 7, state: "班" },
      { num: 8, state: "班" },
      { num: 9, state: "班" },
      { num: 10, state: "班" },
      { num: 11, state: "班" },
      { num: 12, state: "班" },
      { num: 13, state: "班" },
      { num: 14, state: "班" },
      { num: 15, state: "班" },
      { num: 16, state: "班" },
      { num: 17, state: "班" },
      { num: 18, state: "班" },
      { num: 19, state: "班" },
      { num: 20, state: "班" },
      { num: 21, state: "班" },
      { num: 22, state: "班" },
      { num: 23, state: "班" },
      { num: 24, state: "班" },
      { num: 25, state: "班" },
      { num: 26, state: "班" },
      { num: 27, state: "班" },
      { num: 28, state: "班" },
      { num: 29, state: "班" },
      { num: 30, state: "班" },
      { num: 31, state: "班" }
    ]
  }
]);

// 当前年月
const filterDate = () => {
  const newItem = curDate.value.split("-");
  curYear.value = newItem[0];
  curMonth.value = newItem[1];
};

// 考勤数据
const newList = computed(() => {
  let arr = JSON.parse(JSON.stringify(data.value)); //深拷贝
  let small = (page.value - 1) * 8; //开始
  let big = 8 * page.value; //结束
  arr.forEach((item: any) => {
    item.status = item.status.slice(small, big);
  });

  return arr;
});

// 上一页
const handlePre = () => {
  page.value--;
  if (page.value <= 0) {
    page.value = 1;
    return false;
  }
};

// 下一页
const handleNext = () => {
  page.value++;
  if (page.value > 4) {
    page.value = 4;
    return false;
  }
};

// 点击某个表格
const handleChange = (name : any, date : any) => {
  console.log(name, date);
};

// 选择弹框列表
const setShowData = ref(null);
const handleSelect = (val: any) => {
  console.log(val);
  (setShowData.value as any).forEach((item: any) => {
    item.hide();
  });
};
</script>
<style scoped lang="scss">
td {
  border: 1px solid #ccc;
  height: 50px;
  text-align: center;
}
.pre-btn {
  color: #fff;
  top: 50%;
  transform: translate(-50%, -50%);
  right: 10px;
  position: absolute;
  cursor: pointer;
}
.box-list {
  width: 100%;
  line-height: 30px;
  text-align: center;
  &:hover {
    background-color: #f5f7fa;
  }
}
</style>
